<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Console 调试技巧</title>
</head>
<body>
	<p onClick='makeGreen()'>点我啊！</p>

	<script type="text/javascript">
		console.clear();

		const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

		function makeGreen () {
			const p = document.querySelector('p');
			p.style.color = '#bada55';
			p.style.fontSize = '50px';
		}

		// Regular
		console.log('hello');

		// Interpolated
		console.log('Hello I am a %s string!', '💩');

		// Styled
		console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 0px 0px 10px blue');

		// warning!
		console.warn('ON NOOO');

		// Error:
		console.error('Shit!');

		// Info
		console.info('Crocodiles eat 3-4 people per year');

		// Testing
		const p = document.querySelector('p');
		console.assert(p.classList.contains('ouch'), 'That is wrong');

		// clearing
//		console.clear();

		// Viewing DOM Elements
		console.log(p);
		console.dir(p);

//		console.clear();

		// Grouping together
		dogs.forEach(dog => {
			console.groupCollapsed(`${ dog.name }`);
			console.log(`This is ${ dog.name }`);
			console.log(`${ dog.name } is ${ dog.age } years old`);
			console.log(`${ dog.name } is ${ dog.age * 7} dog years old`);
			console.groupEnd(`${ dog.name }`);
		});

		// counting
		console.count('Wes');
    console.count('Wes');
    console.count('Steve');
    console.count('Steve');
    console.count('Wes');
    console.count('Steve');
    console.count('Wes');
    console.count('Steve');
    console.count('Steve');
    console.count('Steve');
    console.count('Steve');
    console.count('Steve');

    // timing
    console.time('fetching data');
    fetch('https://api.github.com/users/wesbos')
      .then(data => data.json())
      .then(data => {
        console.timeEnd('fetching data');
        console.log(data);
      });

      console.table(dogs);
	</script>
</body>
</html>